<template>
	<view class="container">
		<view class="user-section">
			<view class="bg"></view>
			<view class="vip-card-box">
				<image class="card-bg" mode="widthFix" src="static/card.png"></image>
				<view class="info-box">
					<view class="img">
						<image class="portrait" src='static/touxiangkuang.png'></image>
						<image class="face" src='/static/img/public/myl.png'></image>
						<image class="vip" src='/static/vn.png'></image>
						<text class="text">V<span class="number-span">2</span></text>
					</view>
					<view class="text">
						铂金会员卡
					</view>
					<view class="cart_number">NO.&nbsp;&nbsp; {{vip_code}}</view>
				</view>
			</view>
		</view>

		<!-- 会员代理 -->
		<view class="order-section">
			<view class="title">
				<view class="text">会员特权</view>
				<view class="checkorder" @tap="toOrderList(0)">更多会员特权持续更新中...</view>

			</view>
			<scroll-view class="list-scroll-content" scroll-x>
				<view class="box" v-for="(row,index) in authorityList" :key="index">
					<view class="img">
						<image :src="imgsrc + row.pic"></image>
					</view>
					<text>{{row.title}}</text>
					<text>{{row.title_small}}</text>
				</view>
			</scroll-view>

		</view>
		<!-- 会员代理 -->
		<view class="proxy">
			<view class="title">
				<view class="text">会员代理</view>
			</view>
			<view class="a01">
				<view class="b01">
					<text class="member_price">{{money}}</text>
					<view class="btn">去提现</view>
				</view>
				<view class="text">累计佣金 ( 元 )</view>
			</view>
			<view class="a02">
				<view class="item">
					<text class="c01">{{user_count}} 人</text>
					<text class="c02">我的用户</text>
				</view>
				<view class="item">
					<text class="c01">{{user_money}} 元</text>
					<text class="c02">用户佣金</text>
				</view>
				<view class="item">
					<text class="c01">{{agent_count}} 个</text>
					<text class="c02">我的代理</text>
				</view>
				<view class="item">
					<text class="c01">{{agent_money}} 元</text>
					<text class="c02">代理佣金</text>
				</view>
			</view>
			<view class="a03">
				<view class="item" :class="row.colour" v-for="(row,index) in agentList" :key="index" @tap="toPage(row.url,index)">
					<image :src="row.img"></image>
					<text class="text">{{row.text}}</text>
				</view>
			</view>
		</view>
		<!-- 暂时屏蔽会员推荐 Jack -->
		<!-- <view class="recommend">
			<view class="title">
				<view class="text">会员推荐</view>
			</view>
			<view class="a01">
				<view class="item">
					<view class="img">
						<image src="/static/img/goods/yumi.png"></image>
					</view>
					<view class="info">
						<view class="title clamp">云南甜玉米 水果玉米水果玉米水果玉米</view>
						<view class="text">规格：500g/盒</view>
						<view class="price">
							<span class="icon">￥</span>
							<span class="sale">18</span>
							<span class="slogan">￥28</span>
						</view>
					</view>

				</view>
				<view class="item">
					<view class="img">
						<image src="/static/img/goods/yumi.png"></image>
					</view>
					<view class="info">
						<view class="title clamp">云南甜玉米 水果玉米 砝码</view>
						<view class="text">规格：500g/盒</view>
						<view class="price">
							<span class="icon">￥</span>
							<span class="sale">18</span>
							<span class="slogan">￥28</span>
						</view>
					</view>

				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import Api from '@/common/api';
	import listCell from '@/components/mix-list-cell';
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				//会员代理列表
				agentList: [{
					url: '/member/myUsers',
					text: '我的用户',
					img: '/static/img/user/icon_wdyh.png',
					colour: 'colour01'
				}, {
					url: '/member/myAgent',
					text: '我的代理',
					img: '/static/img/user/icon_wdyh.png',
					colour: 'colour02'
				}, {
					url: '/member/shareNow',
					text: '我要推广',
					img: '/static/img/user/icon_wdyh.png',
					colour: 'colour03'
				}],
				// 订单类型
				authorityList: [],
				price: '',
				vip_code: '',
				url: '',
				items: '',
				user_money: '',
				agent_money: '',
				money: '',
				user_count: '',
				agent_count: '',



			}
		},
		onLoad() {
			this.loadData()
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			// if (index === 0) {
			// 	this.$api.msg('点击了扫描');
			// } else if (index === 1) {
			if (index === 0) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.switchTab({
					url: '/pages/user/user'
				});
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			async loadData() {
				var params = {};
				let data = await Api.apiCall('post', Api.vip.message, params);
				this.authorityList = data.house;
				this.price = data.price;
				this.vip_code = data.vip_code;
				this.url = data.url;
				this.items = data.items;
				this.user_count = data.user_count;
				this.agent_count = data.agent_count;
				this.user_money = data.user_money;
				this.money = data.money;
				this.agent_money = data.agent_money;
			},

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			toOrderList(index) {
				var url = '/mall/order/order?state=' + index;

				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			toPage(url, index) {
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				if (url.includes('member/myUsers')) {
					uni.navigateTo({
						url: `${url}?memberCount=${this.user_count}`
					})
					return;
				} else if (url.includes('member/myAgent')) {
					uni.navigateTo({
						url: `${url}?memberCount=${this.agent_count}`
					})
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			toSetting() {
				var url = '/pages/user/information';
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				})
			}
		}


	}
</script>
<style lang='scss'>
	page {
		background-color: #FAFAFA;
	}

	.user-section {
		height: 405upx;

		.bg {
			width: 100%;
			height: 310upx;
			background: linear-gradient(to right, rgba(255, 237, 197, .7), rgba(255, 233, 170, .8));
			border-bottom-left-radius: 375upx 60upx;
			border-bottom-right-radius: 375upx 60upx;
			filter: blur(1px);
			/* opacity: .7; */
		}
	}

	.vip-card-box {
		display: flex;
		width: 100%;
		margin: -258upx 40upx 0;
		flex-direction: column;
		color: #f7d680;
		width: 670upx;
		height: 350upx;
		border-radius: 30upx;
		overflow: hidden;
		position: relative;

		.card-bg {
			position: absolute;
			width: 670upx;
			height: 350upx;
		}

		.info-box {
			width: 100%;
			height: 100%;
			color: #F9E2A2;
			font-size: 32upx;
			position: absolute;

			.img {
				width: 112upx;
				height: 150upx;
				margin: 40upx 0 0 60upx;

				.portrait {
					left: 0;
					top: 0;
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
					background-color: #FFF2BC;

				}

				.face {
					width: 90upx;
					height: 90upx;
					position: absolute;
					margin-top: 14upx;
					left: 70upx;
				}

				.vip {
					width: 51upx;
					height: 40upx;
					position: absolute;
					top: 146upx;
					left: 90upx;
				}

				.text {
					position: absolute;
					top: 224upx;
					left: -240upx;
					color: #232323;
					font-size: 20upx;
					color: red;
					z-index: 1000;

					.number {
						font-size: 16upx;
					}

					/* #232323 */
				}
			}

			.text {
				position: relative;
				margin-top: -120upx;
				margin-left: 200upx;
			}

			.cart_number {
				position: relative;
				top: 168upx;
				left: 190upx;

			}
		}

	}

	.order-section {
		width: 100%;
		padding: 0 30upx;
		margin: 40upx 0 30upx;

		.title {
			width: 100%;
			margin: 56upx 0 32upx;
			font-size: 32upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #232323;
			font-weight: 600;
			position: relative;

			.checkorder {
				color: #ACADAE;
				font-size: 24upx;
				font-weight: 300;
			}
		}

		.list-scroll-content {
			width: 100%;
			white-space: nowrap;
			background-color: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			border-radius: 20upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);

			.box {
				width: 25%;
				padding: 20upx 0 35upx;
				display: inline-flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 85upx;
					height: 85upx;
					margin-bottom: 20upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					color: #232323;
					margin-bottom: 4upx;
					font-size: 26upx;

					&:last-child {
						font-size: 24upx;
						color: #ACADAE;
						margin: unset;
					}
				}
			}
		}
	}

	.proxy {
		width: 100%;
		height: 598upx;
		padding: 0 4%;
		background-color: #fff;

		.title {
			width: 100%;
			font-size: 32upx;
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
		}

		.a01 {
			width: 630upx;
			height: 206upx;
			margin: 0 30upx;
			border-bottom: 1upx solid #E1E5E6;

			.b01 {
				width: 100%;
				height: 144upx;
				padding: 48upx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: row;

				.member_price {
					color: #232323;
					font-size: 56upx;
					font-weight: 600;
				}

				.btn {
					right: 60upx;
					width: 132upx;
					height: 48upx;
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 24upx;
					color: #232323;
					font-size: 24upx;
					border: 1upx solid #767778;
				}
			}

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ACADAE;
				font-size: 26upx;
			}

		}

		.a02 {
			width: 630upx;
			height: 148upx;
			margin: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: $font-sm + 4upx;
				color: $font-color-dark;

				.c01 {
					color: #767778;
				}

				.c02 {
					padding-top: 20upx;
					font-size: $font-sm;
					color: #ACADAE;
				}
			}
		}

		.a03 {
			width: 100%;
			height: 98upx;
			margin: 12upx 0 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				display: flex;
				width: 220upx;
				height: 98upx;
				border-radius: 20upx;
				flex-direction: row;
				align-items: center;
				font-size: $font-sm + 4upx;
				color: $font-color-dark;

				image {
					width: 50upx;
					height: 50upx;
					margin: 0 20upx;
				}

				.text {
					color: #232323;
					font-size: 26upx;
				}

			}

			.colour01 {
				background-color: #FFEDF0;
			}

			.colour02 {
				background-color: #FFF5D9;
			}

			.colour03 {
				background-color: #FFE9D9;
			}
		}
	}

	.recommend {
		width: 100%;
		padding: 0 4%;
		box-shadow: 0upx -2upx 6upx rgba(0, 0, 0, 0.1);

		.title {
			width: 100%;
			font-size: 32upx;
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
		}

		.a01 {
			width: 100%;
			display: flex;
			margin: 14upx 0 54upx;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 330upx;
				height: 500upx;
				display: flex;
				flex-direction: column;
				border-radius: 20upx;
				background-color: #fff;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);

				.img {
					width: 330upx;
					height: 330upx;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 330upx;
						height: 330upx;
					}
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 20upx;
					overflow: hidden;

					.title {
						height: 48upx;
						margin-top: 20upx;
						font-size: 28upx;
						font-weight: 600;
						color: #232323;
						line-height: 1;
						align-items: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
					}

					.text {
						color: #ABADAD;
						font-size: 24upx;
					}

					.price {
						color: #e65339;
						font-size: 36upx;
						font-weight: 600;
						align-items: flex-end;

						.icon {
							font-size: 24upx;
							color: #E52732;
							padding-right: 10upx;
						}

						.sale {
							align-items: baseline;
							margin-left: -14upx;
							margin-bottom: -6upx;
						}

						.slogan {
							color: #807c87;
							margin-left: 20upx;
							font-size: 24upx;
							text-decoration: line-through;
						}
					}

				}


			}
		}
	}
</style>
